<template>
  <div
    style="
      font-family: 'Capriola', sans-serif;
      background: #dad6cc;
      height: 600px;
    "
  >
    <div class="wrap">
      <div class="logo">
        <h1>404</h1>
        <p>Sorry - File not Found!</p>
        <div class="sub">
          <p><a href="#"> Back to Home</a></p>
        </div>
      </div>
    </div>

    <div class="footer">
      Design by-<a href="https://w3layouts.com">W3Layouts</a>
    </div>
  </div>
</template>

<style scoped>
@import 'https://fonts.googleapis.com/css?family=Capriola';
html {
  /*将height设置为100%,使得内容铺满屏幕*/
  /*且#container有高度基于的父元素*/
  height: 100%;
  background-color: #dddddd;
}
.wrap {
  margin: 0 auto;
  width: 1000px;
}
.logo h1 {
  font-size: 200px;
  color: #ff7a00;
  text-align: center;
  margin-bottom: 1px;
  text-shadow: 4px 4px 1px white;
}
.logo p {
  color: #b1a18d;
  font-size: 20px;
  margin-top: 1px;
  text-align: center;
}
.logo p span {
  color: lightgreen;
}
.sub a {
  color: #ff7a00;
  text-decoration: none;
  padding: 5px;
  font-size: 13px;
  font-family: arial, serif;
  font-weight: bold;
}
.footer {
  color: white;
  position: absolute;
  bottom: 10px;
}
.footer a {
  color: #ff7a00;
}
</style>
